import { Card, Toast } from '@ant-design/react-native';
import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

interface UserCardProps {
    avatar?: string | number;
    username?: string;
    onEditPress?: () => void;
    nickname?: string;
}

export default function UserCard({ avatar, username, onEditPress, nickname }: UserCardProps) {
    return (
        <View>
            <TouchableOpacity onPress={onEditPress}>
                <Card style={styles.card}>
                    <View style={styles.viewStyle}>
                        {avatar ? (
                            <Image
                                source={typeof avatar === 'string' ? { uri: avatar } : avatar}
                                style={styles.avatar}
                                resizeMode="cover"
                            />
                        ) : (
                            <View style={styles.avatar}>
                                <FontAwesome
                                    name='user-o'
                                    size={28}
                                    color="#888"
                                    style={{ textAlign: 'center', textAlignVertical: 'center' }}
                                />
                            </View>
                        )}
                        {username ? (
                            <View style={styles.textContainer}>
                                <Text style={styles.userName}>{nickname}</Text>
                                <Text style={styles.editText}>{username}</Text>
                            </View>
                        ):(
                            <View style={styles.textContainer}>
                                <Text style={styles.userName}>用户名</Text>
                                <Text style={styles.editText}>点击修改用户名</Text>
                            </View>
                        )}
                    </View>
                </Card>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    card: {
        width: 330,
        height: 70,
        overflow: 'hidden',
        elevation: 0,
        backgroundColor: '#fff',
        alignSelf: 'center',
        // borderRadius: 40,
        outlineWidth: 0,
        borderWidth: 0,
    },
    viewStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        padding: 10,
    },
    avatar: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: '#eee',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textContainer: {
        marginLeft: 16,
        justifyContent: 'center',
    },
    userName: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#000',
    },
    editText: {
        fontSize: 13,
        color: '#888',
        marginTop: 4,
    },
});


